
* {
    margin: 0px;
    padding: 0px;
}

.centers {
    width: 100%;
    text-align: center;
    margin: 0px auto;
    margin-top: 100px;
}

.zhu {
    background: url("../image/7.jpg");
    width: 500px;
    height: 650px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

h1 {
    color: #42eeff;
}

.di1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.di1:hover {
    color: #ff67cb;
}

.di1:hover::before {
    transform: scale(1, 1);
    background-color: #103dbe;
}

.di1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(0, 1);
    transition: all .6s;
    z-index: -1;
}

.di2 {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.di2:hover {
    color: #ff67cb;
}

.di2:hover::before {
    transform: scale(1, 1);
    background-color: #103dbe;
}

.di2::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(0, 1);
    transition: all .6s;
    z-index: -1;
}

di3:hover {
    color: #ff67cb;
}

.di3:hover::before {
    transform: scale(1, 1);
    background: url("../image/10.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.di3::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(0, 1);
    transition: all .6s;
    z-index: -1;
}

.photo {
    color: #ff67cb;
}

.but {
    text-align: center;

}

.kuai {
    color: #00FFFF;
}

